<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PPTX2HTML</title>

<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<link rel="stylesheet" href="./css/font-awesome.min.css">
<link rel="stylesheet" href="./css/pptx2html.css">

<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./js/FileSaver.min.js"></script>
<script type="text/javascript" src="./js/lz-string.min.js"></script>

</head>

<body>
	
	<div class="container">
		
		<div class="header">
			<ul class="nav nav-pills pull-right">
				<li class="active"><a href="#"><i class="glyphicon glyphicon-home"></i> Home</a></li>
				<li><a href="https://github.com/g21589/PPTX2HTML"><i class="fa fa-github"></i> Github</a></li>
			</ul>
			<h2 class="text-muted">PPTX2HTML</h2>
		</div>
		
		<div class="jumbotron">
			<h1>PPTX2HTML</h1>
			<p class="lead">Transform PPTX to HTML</p>
		</div>
		
		<div class="row">
			<div class="col-md-6 col-md-offset-3" style="text-align: center;">
				
				<!-- Split button -->
				<div class="btn-group">
				  <div class="fileUpload btn btn-success">
					<span><i class="glyphicon glyphicon-upload"></i> Choose a PPTX file</span>
					<input id="uploadBtn" type="file" class="upload" accept="application/vnd.openxmlformats-officedocument.presentationml.presentation"/>
				  </div>
				  <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
					<span class="caret"></span>
					<span class="sr-only">Toggle Dropdown</span>
				  </button>
				  <ul class="dropdown-menu">
					<li><a href="#" data-toggle="modal" data-target="#slideContentModel"><i class="glyphicon glyphicon-search"></i> Raw content of slides</a></li>
					<li id="download-btn"><a href="#"><i class="glyphicon glyphicon-save-file"></i> Download html</a></li>
					<li role="separator" class="divider"></li>
					<li id="to-reveal-btn"><a href="#"><i class="glyphicon glyphicon-export"></i> To Reveal.js slides</a></li>
					<li id="download-reveal-btn"><a href="#"><i class="glyphicon glyphicon-export"></i> Export to Reveal.js slides</a></li>
				  </ul>
				</div>
				
				<!-- Modal -->
				<div class="modal fade" id="slideContentModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				  <div class="modal-dialog" role="document">
					<div class="modal-content">
					  <div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">Raw content of slides</h4>
					  </div>
					  <div class="modal-body">
					    <div class="form-group">
						  <label for="comment">Content:</label>
						  <textarea class="form-control" rows="5" id="comment"></textarea>
						</div>
					  </div>
					  <div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
						<button id="download-btn2" type="button" class="btn btn-primary">Download</button>
					  </div>
					</div>
				  </div>
				</div>
				
			</div>
			
		</div>
		
		<br>
		
		<div class="row">
			<div class="col-md-6 col-md-offset-3" style="text-align: center;">
				<img id="pptx-thumb" class="img-thumbnail" src="" alt="">
			</div>
		</div>
		
		<br>
		
		<div class="row">
			<div class="col-lg-12">
				<div class="progress">
					<div id="load-progress" class="progress-bar progress-bar-striped" style="transition: none;" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
						0%
					</div>
				</div>
			</div>
		</div>
		
		<div class="row">
			<div class="col-lg-12">
				<div id="error_block" class="alert alert-danger hidden">
					You will need a recent browser to use this demo :(
				</div>
				<div id="info_block" class="alert alert-success" role="alert">
				
				</div>
				<div id="result_block" class="hidden">
					<h3>Slides:</h3>
					<div id="result"></div>
				</div>
			</div>
		</div>
		
		<div class="footer">
			<hr>
			<p>Copyright © 2015 g21589, All Rights Reserved.<br>Contact Person: g21589, E-mail: g21589@gmail.com</p>
		</div>
		
	</div>

<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/pptx2html.js"></script>

<link rel="stylesheet" href="css/nv.d3.min.css">
<script type="text/javascript" src="js/chart/d3.min.js"></script>
<script type="text/javascript" src="js/chart/nv.d3.min.js"></script>

</body>
</html>
